
 window.addEventListener('load', function () {
  function animate(obj, target, callback) {
    //先清除一次
    clearInterval(obj.timer);
    //再添加定时器
    obj.timer = setInterval(function() {
        //缓动动画公式：（目标值-现在位置）/10，要写在定时器里面作为步长
        let step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step); //步长大于0，向上取整，步长小于0，向下取整
        if (obj.offsetLeft == target) {
            obj.offsetLeft = target;
            //添加停止定时器
            clearInterval(obj.timer);
            //回调函数添加到定时器结束后
            if (callback) {
                callback();
            }
            return;
        }
        //原先位置加上步长值
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

  //1，获取元素
  let box = document.querySelector('.box');
  let list = document.querySelector('.list');
  let lists = document.querySelectorAll('.list li img');
  let arrowL = document.querySelector('.left');
  let arrowR = document.querySelector('.right');
  let circle = document.querySelector('.box .circle');
  console.log(lists.length); //5

  //2,鼠标经过大盒子，左右按钮显示与隐藏
  box.addEventListener('mouseenter', function () {
    arrowL.style.display = "block";
    arrowR.style.display = "block";
    clearInterval(timer);
    timer = null;
  })
  box.addEventListener('mouseleave', function () {
    arrowL.style.display = "none";
    arrowR.style.display = "none";
    timer = setInterval(function () {
      arrowR.click();
    }, 2000);
  })

  //3,动态生成小圆圈，小圆圈个数等于图片个数,要用for循环
  for (let i = 0; i < lists.length; i++) {
    //(1)创建li,并添加自定义属性
    let li = document.createElement('li');
    li.setAttribute('index', i);
    //(2)放到circle里面
    circle.appendChild(li);

    //4,点击切换小圆圈，排他思想
    circle.children[i].onclick = function () {
      //先清除默认样式
      for (let j = 0; j < circle.children.length; j++) {
        circle.children[j].className = '';
      };
      this.className = 'current';
      //5,点击小圆圈，移动图片，移动的是list盒子
      //list盒子的移动距离是，小圆圈的索引号乘以图片的宽度，注意是负值
      let listsWidth = lists[i].offsetWidth; //获取图片宽度
      let index = this.getAttribute('index'); //获取每个小圆圈的索引号，直接用li也行
      //当我们点击了某个了小圆圈，就拿到了该索引号，并把它赋给num和roll
      num = index;
      roll = index;
      console.log(listsWidth);
      animate(list, -index * listsWidth)
    };
  }
  //3.1，给第一个li添加class属性current
  circle.children[0].className = 'current';
  //6,克隆第一张图片，放到list最后面
  let listFirst = list.children[0].cloneNode(true);
  list.appendChild(listFirst);


  //7,点击右侧按钮，向右滚动图片
  let num = 0;
  let roll = 0;
  //节伐流
  let flag = true;
  arrowR.addEventListener('click', function () {
    if (flag) {
      flag = false; //关闭节伐流
      //当图片滚动到最后一张时，此时list要快速复left改为0
      if (num == list.children.length - 1) {
        list.style.left = 0;
        num = 0;
      }
      num++;
      //滚动距离等于num*图片的宽度
      let liWidth = list.children[0].offsetWidth; //获取第一张图片的宽度
      animate(list, -num * liWidth, function () {
        flag = true;
      });
      //8,点击右侧按钮，使小圆圈一起变化
      roll++;
      //当roll等于5时，就复原
      if (roll == circle.children.length) {
        roll = 0;
      }
      for (let i = 0; i < circle.children.length; i++) {
        circle.children[i].className = '';
      }
      //留下需要的
      circle.children[roll].className = 'current';
    }

  });

  //9,点击左侧按钮
  arrowL.addEventListener('click', function () {
    if (flag) {
      flag = false; //关闭节伐流
      //当图片滚动到最后一张时，此时list要快速复left改为0
      if (num == 0) {
        num = list.children.length - 1;
        //滚动距离等于num*盒子的宽度
        list.style.left = -num * list.children[0].length + 'px';

      }
      num--;
      let liWidth = list.children[0].offsetWidth; //获取第一张图片的宽度
      //num乘以list盒子的宽度
      animate(list, -num * liWidth, function () {
        flag = true; //打开节伐流
      });
      //8,点击右侧按钮，使小圆圈一起变化
      roll--;
      //如果roll<0，说明是第一张图片
      if (roll < 0) {
        roll = circle.children.length - 1;
      }
      for (let i = 0; i < circle.children.length; i++) {
        circle.children[i].className = '';
      }
      //留下需要的
      circle.children[roll].className = 'current';

    }
  });

  //10,自动播放
  let timer = setInterval(function () {
    arrowR.click();
  }, 2000);
})